<template>
  <view class="home-app d-flex flex-column">
    <mineNavbar :styleData="styleData"></mineNavbar>
    <!--pages/search/search.wxml-->
    <view>
      <tabbarTop tabbarName='搜索'></tabbarTop>
      <view class="content">
        <view class="c_search">
          <picker :value="slectArrIdex" :range="slectArr" range-key="label" @change="handleSelect" class="c_picker">
            <view class="left">
              <text>{{ positionTypeName }}</text>
              <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/23/ba145cbf628342608d71e80919ebd06e.png"
                mode="" />
            </view>
          </picker>
          <view class="middle">
            <input type="text" v-model="fullPositionName" confirm-type="search" placeholder="搜索职位/公司名称"
              @confirm="submit" />
          </view>
          <view class="right" @click="submit">
            <image src="@/static/images/recruit/search.png" mode="" />
          </view>
        </view>
        <view class="c_text">
          <view>搜索历史</view>
          <view @click="onClear">
            <text class='iconfont icon-lajitong'></text>
            <text>清除</text>
          </view>
        </view>
        <view class="c_history">
          <view v-for="item in historyArr" :key="item">
            <view @click="onHistory(item)">{{ item }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
<script>
export default {
  components: {},
  data() {
    return {
      styleData: {
        topText: "",
        TextColor: "#FFF",
        show: true,
      },
      positionType: 1, // 类型
      positionTypeName: "零工兼职",
      slectArrIdex: 0,
      fullPositionName: "", //输入框职位/公司名称
      slectArr: [
        { label: "零工兼职", value: 1 },
        { label: "小时工兼职", value: 2 },
        { label: "全职岗位", value: 3 },
      ],
      historyArr: [],
    };
  },
  computed: {},
  watch: {},
  async onLoad(options) {
    uni.setStorageSync('inputValue', '')
  },
  async onShow() {
    this.historyArr = JSON.parse(uni.getStorageSync("historyArr") || "[]");
    console.log(this.historyArr, " historyArr ");
    this.fullPositionName = JSON.parse(uni.getStorageSync("inputValue") || "")
  },
  onReady() { },
  methods: {
    handleSelect(e) {
      console.log(e, "handleSelect");
      let index = e.detail.value;
      this.slectArrIdex = index;
      this.positionTypeName = this.slectArr[index].label;
      this.positionType = this.slectArr[index].value;
    },
    onClear() {
      this.historyArr = [];
      uni.removeStorage({
        key: "historyArr",
      });
    },
    onHistory(item) {
      this.fullPositionName = item;
    },
    submit() {
      let params = this.fullPositionName.trim();
      uni.setStorageSync("inputValue", JSON.stringify(params));
      if (params) {
        if (this.historyArr.includes(params)) {
          let i = this.historyArr.indexOf(params);
          this.historyArr.splice(i, 1);
          this.historyArr.unshift(params);
        } else {
          if (this.historyArr.length > 9) {
            this.historyArr.splice(9, 1);
          }
          this.historyArr.unshift(params);
          uni.setStorageSync("historyArr", JSON.stringify(this.historyArr));
        }
      }
      let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
      let prevPage = pages[pages.length - 2]; //上一页页面实例
      let item = {
        fullPositionName: this.fullPositionName, // 查询输入
        positionType: this.positionType, // 状态
      };
      console.log(item, "item-----");
      uni.$emit("updateData", item);
      // prevPage.$.devtoolsRawSetupState.onSubmit(item) // 回退返回数据
      uni.switchTab({ url: '/pages/tabbarChange/sencondPage/index' })
    },
  },
};
</script>
<style lang="scss" scoped>
.home-app {
  position: relative;
  height: 100%;

  /* pages/search/search.wxss */
  .content {
    width: calc(100% - 20px);
    margin: 0 10px;
    font-size: 12px;

    .c_search {
      width: 100%;
      height: 35px;
      background-color: #e4dede;
      border-radius: 75px;
      display: flex;
      justify-content: center;
      align-items: center;

      .c_picker {
        width: 20%;
      }

      .left {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-left: 10px;

        >text {
          margin-right: 5px;
        }

        >image {
          width: 16rpx;
          height: 16rpx;
        }
      }

      .left::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -5px;
        transform: translateY(-50%);
        width: 1px;
        background-color: #00000033;
        height: 10px;
      }

      .middle {
        width: 69%;
        margin-left: 20px;
      }

      .right {
        width: 10%;
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 14px;
          height: 14px;
        }
      }

      .iconfont {
        transform: rotate(-90deg);
        font-size: 10px;
        color: #ccc;
      }
    }

    .c_text {
      color: #000000a3;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      font-size: 14px;

      .iconfont {
        font-size: 12px;
      }

      text {
        margin: 0 5px;
      }
    }

    .c_history {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin-top: 5px;

      >view {
        padding: 8px 15px;
        background: #d8d8d85c;
        margin: 10px 1px;
        border-radius: 16px;
      }
    }
  }
}
</style>
  